<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <figure>
        <img usemap="#testMap" src="./1.jpg" alt="一张动漫图片" />
        <map name="testMap">
            <!-- 圆形点击区域 圆心xy,半径-->
            <area shape="circle" coords="304, 122,25" target="_blank" href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1567089142183_R&pv=&ic=0&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&hs=2&sid=&word=%E5%8A%A8%E6%BC%AB%E5%9B%BE%E7%89%87">
            <!-- 矩形点击区域   左上角右下角 -->
            <area shape="rect" coords="110, 100,190, 200" target="_blank" href="https://www.baidu.com"></a>
            <!-- 多边形，有几个边就几个点 -->
            <area shape="poly" coords="110, 100,190, 200, 304, 122" target="_blank" href="https://baike.baidu.com/item/Angelababy/1509275?fr=aladdin">
        </map>
        <figcaption>
            <h2>动漫</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum necessitatibus quod porro qui quos at, eum reprehenderit totam debitis. Non quas possimus expedita consequuntur vitae sequi cumque quod? Accusamus, similique!
            </p>
        </figcaption>
    </figure>

</body>

</html>